<!-- 导航图标 -->
<template>
    <div
        :style="boxStyle"
        class="nav-icon"
    >
        <el-scrollbar always>
            <ul
                class="nav-icon-list"
                :class="{
                    'nav-icon-sideslip': isSideslip
                }"
                :style="contentStyle"
            >
                <template v-for="(item, index) in content" :key="index">
                    <li :style="navItemStyle" class="nav-icon-item">
                        <div class="nav-icon-item-img-wrap">
                            <el-image
                                :src="item.pic"
                                :style="navImageStyle"
                                fit="fill"
                                class="nav-icon-item-img"
                            >
                                <template #placeholder>
                                    <div class="picture-image-slot"></div>
                                </template>
                                <template #error>
                                    <div class="picture-image-slot no-image"></div>
                                </template>
                            </el-image>
                        </div>
                        <div :style="navTitleStyle" class="nav-icon-item-title">
                            {{ item.title }}
                        </div>
                    </li>
                </template>
            </ul>
        </el-scrollbar>

        <template v-if="(content.length / col > row) && !isSideslip">
            <div class="nav-icon-dropdown">
                <el-icon><icon-arrow-down /></el-icon>
            </div>
        </template>
    </div>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
export default defineComponent({
    name: 'WidgetNavIcon',
    props: {
        element: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props, { emit }) {
        const { element } = toRefs(props)

        const content = computed(() => element.value.eles.content)
        const row = computed(() => element.value.eles.customFeature.row)
        const col = computed(() => element.value.eles.customFeature.col)
        const isSideslip = computed(() => element.value.eles.customFeature.isSideslip)
        // 首行的图标个数
        const firstLineNum = computed(() => {
            let surplusNum = content.value.length - (col.value * row.value)
            if (surplusNum < 0) {
                surplusNum = 0
            }
            return Math.ceil(surplusNum / row.value) + col.value
        })
        // 滑块宽度
        const sideslipWidth = computed(() => {
            const style = element.value.eles.style || {}
            const width = !!style.width ? parseInt(style.width) : 320
            if (!isSideslip.value) return width
            let totalWidth = (100 / col.value * firstLineNum.value) / 100 * width
            if (firstLineNum.value !== col.value) {
                totalWidth -= (totalWidth / col.value / 2.5)
            }
            return totalWidth
        })

        const boxStyle = computed(() => {
            const style = element.value.eles.style || {}
            return {
                width: style.width,
                opacity: style.opacity,
                marginTop: style['margin-top'],
                marginLeft: style['margin-left'],
                marginRight: style['margin-right'],
                borderStyle: style['border-style'],
                borderColor: style['border-color'],
                borderWidth: style['border-width'],
                borderRadius: style['border-radius'],
                boxShadow: style['box-shadow'],
                backgroundColor: style['background-color'],
                backgroundImage: style['background-image']
            }
        })

        const contentStyle = computed(() => {
            return {
                width: `${sideslipWidth.value}px`
            }
        })

        const navItemStyle = computed(() => {
            let width = sideslipWidth.value
            if (isSideslip.value) {
                width = width / firstLineNum.value
            } else {
                width = width / col.value
            }
            return {
                width: `${width}px`
            }
        })

        const navImageStyle = computed(() => {
            const customFeature = element.value.eles.customFeature || {}
            return {
                width: `${customFeature.iconSize}px`,
                height: `${customFeature.iconSize}px`,
                backgroundColor: customFeature.iconBackgroundColor,
                borderRadius: `${customFeature.iconBorderRadius}px`,
                borderColor: customFeature.iconBorderColor,
                borderWidth: `${customFeature.iconBorderWidth}px`,
                borderStyle: customFeature.iconBorderStyle,
                padding: `${customFeature.iconPadding}px`
            }
        })

        const navTitleStyle = computed(() => {
            const style = element.value.eles.style || {}
            return {
                fontSize: style['font-size'],
                textAlign: style['text-align'],
                fontWeight: style['font-weight'],
                fontStyle: style['font-style'],
                textDecoration: style['text-decoration'],
                color: style.color
            }
        })
        
        return {
            element,
            content,
            row,
            col,
            isSideslip,
            boxStyle,
            contentStyle,
            navItemStyle,
            navImageStyle,
            navTitleStyle
        }
    }
})
</script>

<style lang="less" scoped>
@import './widget-nav-icon.less';
</style>